.load-bg {
  position: absolute;
}
.load-images {
  width: 140PX;
  height: 140PX;
  margin-left: -70px;
  margin-top: -70px;
  top: 30%;
}
.loadddd {
  width: 100PX;
  height: 100PX;
  /*background-color:red ;*/
  position: absolute;
  display: none;
  -webkit-animation: box 3.5s;
          animation: box 3.5s;
}
@-webkit-keyframes box {
  0% {
    width: 140PX;
    height: 140PX;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  80% {
    width: 140PX;
    height: 140PX;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  81% {
    width: 140PX;
    height: 140PX;
    -webkit-transform: rotate(-50deg);
            transform: rotate(-50deg);
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
  }
  83% {
    width: 140PX;
    height: 140PX;
    -webkit-transform: rotate(50deg);
            transform: rotate(50deg);
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
  }
  85% {
    width: 140PX;
    height: 140PX;
    -webkit-transform: rotate(-50deg);
            transform: rotate(-50deg);
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
  }
  87% {
    width: 140PX;
    height: 140PX;
    -webkit-transform: rotate(50deg);
            transform: rotate(50deg);
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
  }
  89% {
    width: 140PX;
    height: 140PX;
    -webkit-transform: rotate(-50deg);
            transform: rotate(-50deg);
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
  }
  91% {
    width: 140PX;
    height: 140PX;
    -webkit-transform: rotate(50deg);
            transform: rotate(50deg);
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
  }
  93% {
    width: 140PX;
    height: 140PX;
    -webkit-transform: rotate(-50deg);
            transform: rotate(-50deg);
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
  }
  95% {
    width: 140PX;
    height: 140PX;
    -webkit-transform: rotate(50deg);
            transform: rotate(50deg);
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
  }
  97% {
    width: 140PX;
    height: 140PX;
    -webkit-transform: rotate(-50deg);
            transform: rotate(-50deg);
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
  }
  99% {
    width: 140PX;
    height: 140PX;
    -webkit-transform: rotate(50deg);
            transform: rotate(50deg);
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
  }
  100% {
    width: 140PX;
    height: 140PX;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
  }
}
@keyframes box {
  0% {
    width: 140PX;
    height: 140PX;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  80% {
    width: 140PX;
    height: 140PX;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  81% {
    width: 140PX;
    height: 140PX;
    -webkit-transform: rotate(-50deg);
            transform: rotate(-50deg);
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
  }
  83% {
    width: 140PX;
    height: 140PX;
    -webkit-transform: rotate(50deg);
            transform: rotate(50deg);
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
  }
  85% {
    width: 140PX;
    height: 140PX;
    -webkit-transform: rotate(-50deg);
            transform: rotate(-50deg);
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
  }
  87% {
    width: 140PX;
    height: 140PX;
    -webkit-transform: rotate(50deg);
            transform: rotate(50deg);
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
  }
  89% {
    width: 140PX;
    height: 140PX;
    -webkit-transform: rotate(-50deg);
            transform: rotate(-50deg);
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
  }
  91% {
    width: 140PX;
    height: 140PX;
    -webkit-transform: rotate(50deg);
            transform: rotate(50deg);
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
  }
  93% {
    width: 140PX;
    height: 140PX;
    -webkit-transform: rotate(-50deg);
            transform: rotate(-50deg);
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
  }
  95% {
    width: 140PX;
    height: 140PX;
    -webkit-transform: rotate(50deg);
            transform: rotate(50deg);
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
  }
  97% {
    width: 140PX;
    height: 140PX;
    -webkit-transform: rotate(-50deg);
            transform: rotate(-50deg);
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
  }
  99% {
    width: 140PX;
    height: 140PX;
    -webkit-transform: rotate(50deg);
            transform: rotate(50deg);
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
  }
  100% {
    width: 140PX;
    height: 140PX;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
  }
}
